<template>
  <self-adaption :full-screen="false">
    <section class="hi-layouts-wrap">
      <hi-loading v-show="isLoading" />

      <HiHeader class="hi-header-wrap" />

      <section class="hi-layouts-container">
        <router-view />
      </section>
    </section>
  </self-adaption>
</template>

<script setup lang="ts">
import { watch,ref } from 'vue';

import { RouterView } from 'vue-router';

import HiHeader from './components/header/index.vue';

import selfAdaption from '@/components/self-adaption';
import { useAppStore } from '@/store/app';

const appStore = useAppStore();
const isLoading = ref(false);
watch(
  () => appStore.loading,
  (val) => {
    isLoading.value = val;
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.hi-layouts-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: var(--maia-bg);
  background-position: center center;
  background-size: cover;

  .hi-layouts-container {
    box-sizing: border-box;
    height: 100%;
    padding-top: calc(var(--maia-nav-header-height) + var(--maia-small-space));
  }
}
</style>
